<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { marked } from 'marked'
import { useRouter } from 'vue-router'

const router = useRouter()
const markdownContent = ref('')
const renderedContent = ref('')

const interviewGuide = `
# 面试流程指南

## 1. 面试准备
- 确保你的开发环境已经准备就绪
- 检查网络连接是否稳定
- 准备好你的简历和相关项目经验

## 2. 面试流程
### 2.1 技术面试
1. 基础知识考察
   - Vue.js 核心概念
   - TypeScript 基础
   - 前端工程化
   
2. 项目经验
   - 项目架构设计
   - 技术难点解决
   - 性能优化经验

3. 编码能力
   - 现场编码
   - 代码审查
   - 问题解决能力

### 2.2 项目实战
1. 需求分析
   - 理解业务需求
   - 技术方案设计
   
2. 编码实现
   - 代码规范
   - 功能实现
   - 测试用例

3. 项目展示
   - 功能演示
   - 技术讲解
   - 问题解答

## 3. 注意事项
- 保持代码整洁和规范
- 注重代码可维护性
- 考虑性能优化
- 注意代码安全性

## 4. 评分标准
- 技术能力 (40%)
- 编码质量 (30%)
- 项目经验 (20%)
- 沟通能力 (10%)

## 5. 时间安排
- 技术面试：60分钟
- 项目实战：120分钟
- 总结反馈：30分钟

祝你好运！
`

const goToSubmit = () => {
  router.push('/submit')
}

onMounted(async () => {
  markdownContent.value = interviewGuide
  renderedContent.value = await marked(interviewGuide)
})
</script>

<template>
  <div class="interview-container">
    <div class="interview-content">
      <div class="markdown-body" v-html="renderedContent"></div>
      <div class="submit-section">
        <button class="submit-button" @click="goToSubmit">提交作品</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.interview-container {
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.interview-content {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.submit-section {
  margin-top: 2rem;
  text-align: center;
}

.submit-button {
  background-color: #67c23a;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #85ce61;
}

:deep(.markdown-body) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #24292e;
}

:deep(.markdown-body h1) {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
  margin-top: 24px;
  margin-bottom: 16px;
}

:deep(.markdown-body h2) {
  font-size: 1.5em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
  margin-top: 24px;
  margin-bottom: 16px;
}

:deep(.markdown-body h3) {
  font-size: 1.25em;
  margin-top: 24px;
  margin-bottom: 16px;
}

:deep(.markdown-body ul) {
  padding-left: 2em;
  margin-top: 0;
  margin-bottom: 16px;
}

:deep(.markdown-body li) {
  margin-top: 0.25em;
}

:deep(.markdown-body p) {
  margin-top: 0;
  margin-bottom: 16px;
}

@media screen and (max-width: 768px) {
  .interview-container {
    padding: 1rem;
  }
  
  .interview-content {
    padding: 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  .interview-container {
    padding: 0.5rem;
  }
  
  .interview-content {
    padding: 1rem;
  }
}
</style> 